import React from "react";
import GoBack from "@/components/TheGoBack";
import TheUpload from "@/components/TheUpload";
import "../style/style.less";
import { apiGetAppEvaluateView, apiGetAppEvaluateEdit } from '@/request/appEvaluate'
import _ from 'lodash'
import {Button, Form, Input, Space} from "antd";

const {TextArea} = Input;

class Edit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showUpFile:true,
            fileList: [],
            btnLoading: false,
        };
    }
    async componentDidMount() {
        await this.getData()
    }
    getData = async () => {
        const { id } = this.props.match.params
        let res = await apiGetAppEvaluateView({ storeEvaluationId: id })
        if (res.data && res.code === 0) {
            let fileList = [];
            if (res.data.images){
                fileList = res.data.images.split(',').map((v, i) => {
                    return {
                        uid: i+1,
                        name: 'image',
                        url: v,
                        status: 'done',
                    }
                })
            }
            this.setState({ fileList,showUpFile:'true'}, () => {
                this.formRef.setFieldsValue({
                    evaluationContent:res.data.evaluationContent,
                    images:res.data.images
                })
            })
        }
    }
    //form表单确定事件
    onFinish = async values => {
        this.setState({ btnLoading: true })
        values.goodsEvaluationId = this.props.match.params.id;
        values.goodsId = this.props.match.params.gId;

        let res = await apiGetAppEvaluateEdit({ ...values })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '编辑成功'
          })
            this.props.history.goBack()
        }
    }
    //图片上传回调
    getDetailsFileResult = value => {
        if (value && value.length) {
            let arr = value.map(v => {
                if (v.response && v.response.code === 0) {
                    return v.response.data
                } else {
                    return v.url
                }
            }).join(',')
            this.formRef.setFieldsValue({
                images:arr
            })
        }
    }

    render() {
        let { showUpFile,fileList,btnLoading } = this.state;
        return (
            <div className="commodity-list-detail p-layout-box">
                <GoBack history={this.props.history} title={"编辑评价"}/>
                <div className="p-layout-content">
                    <Form
                        onFinish={this.onFinish}
                        ref={ref => this.formRef = ref}
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 12,
                        }} >
                        <Form.Item rules={[{required: true}]} label="评价内容" name="evaluationContent">
                            <TextArea rows={4} placeholder="最多100字" maxLength={100} style={{width: 400}}/>
                        </Form.Item>
                        <Form.Item rules={[{required: true}]} label="评价图片" name="images">
                            {
                                !_.isEmpty(showUpFile) && <TheUpload fileList={fileList} maxSize={10} getFileResult={this.getDetailsFileResult} len={5} />
                            }
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 4,
                                span: 16,
                            }}
                        >
                            <Space>
                                <Button onClick={() => this.props.history.goBack()}>取消</Button>
                                <Button loading={btnLoading} htmlType="submit" type="primary">保存</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </div>
            </div>

        );
    }
}

export default Edit;
